let currentBanner = 0;  /* 监测现在的banner */
let currentRespBanner = 0;
let currentDevBanner = 0;
let bannerHeight = document.getElementsByClassName('banner')[0];
let banner = document.getElementsByClassName('banner-group')[0];/* 获取所有banner的内容 */
let bannerDot = document.getElementsByClassName('page-dot')[0].children;
let bannerDevDot = document.getElementsByClassName('page-dot')[1].children;
let isAnimate = false;  /* 判断是否在动画中，以免导致异步错乱 */
let respBanner = document.getElementsByClassName('banner-content');
let devBanner = document.getElementsByClassName('banner-group')[1].children;
let text = document.getElementsByClassName('text');
banner.style.left = '0%';
bannerDot[currentBanner].style.width = '30px';
bannerDevDot[currentBanner].style.width = '30px';
bannerDot[currentBanner].style.backgroundColor = 'rgb(0,82,217)';
bannerDevDot[currentBanner].style.backgroundColor = 'rgb(0,82,217)';
text[0].className = 'text active';
devBanner[currentBanner].className = 'active';
let respBannerArray = Array.from(respBanner);
initRespBanner();

/* 循环轮播 */
let timer = setInterval(() => {
  nextBanner();
}, 8000);
let respTimer = setInterval(() => {
  switchRespBanner('next');
}, 8000);
let devTimer = setInterval(() => {
  changeSingleDevBanner(1);
}, 8000);

/* 初始化 */
function initRespBanner() {
  respBannerArray.forEach((data) => {
    data.style.opacity = 0;
  })
  respBannerArray[0].style.opacity = 1;
}

/* 移动函数 */
function move(index){
  /* 暂停计时 */
  clearInterval(timer);
  if(isAnimate == false) {
    isAnimate = true;
    let distance = index - currentBanner;
    if(index - currentBanner != 0){
      let i = 1;
      bannerDot[index].style.width = '30px';
      bannerDot[index].style.backgroundColor = 'rgb(0,82,217)';
      bannerDot[currentBanner].style.width = '10px';
      bannerDot[currentBanner].style.backgroundColor = 'rgb(255,255,255)';
      /* 移动 */
      let moveTimer = setInterval(() => {
        /* 使用distance变量可以保证不管经过多少个banner都可以在相同的时间内完成动画 */
        banner.style.left = parseInt(banner.style.left) - 2 * distance + '%';
        if(i == 50){
          /* 异步结束 */
          clearInterval(moveTimer);
          text[index].className = 'text active';
          text[currentBanner].className = 'text';
          currentBanner = index;
          isAnimate = false;
          /* 重新计时 */
          timer = setInterval(() => {
            nextBanner();
          }, 8000);
        } 
        i++;
      }, 5)
    }else {
      isAnimate = false;
      /* 重新计时 */
      timer = setInterval(() => {
        nextBanner();
      }, 8000);
    }
  }
}
function nextBanner() {
  let index;
  if(currentBanner == banner.children.length - 1) {
    index = 0;
  }else{
    index = currentBanner + 1
  }
  move(index);
}
function lastBanner() {
  let index;
  if(currentBanner == 0) {
    index = banner.children.length - 1;
  }else{
    index = currentBanner - 1
  }
  move(index);
}
function switchRespBanner(command) {
  clearInterval(respTimer);
  let index;
  if(command == 'next'){
    currentRespBanner == (respBannerArray.length - 1) ? index = 0 : index = currentRespBanner + 1;
    respBannerArray[currentRespBanner].style.opacity = 0;
    respBannerArray[index].style.opacity = 1;
  }else {
    currentRespBanner == 0 ? index = respBannerArray.length - 1 : index = currentRespBanner - 1;
    respBannerArray[currentRespBanner].style.opacity = 0;
    respBannerArray[index].style.opacity = 1;
  }
  currentRespBanner = index;
  respTimer = setInterval(() => {
    switchRespBanner('next');
  }, 8000);
}
function changeDevBanner(index) {
  clearInterval(devTimer);
  devBanner[currentDevBanner].removeAttribute('class');
  devBanner[index].className = 'active';
  bannerDevDot[currentDevBanner].removeAttribute('style');
  bannerDevDot[index].style.backgroundColor = 'rgb(0,82,217)';
  bannerDevDot[index].style.width = '30px';
  currentDevBanner = index;
  devTimer = setInterval(() => {
    changeSingleDevBanner(1);
  }, 8000);
}
function changeSingleDevBanner(dir) {
  /* 1为下一个，0为上一个 */
  if(dir == 1) {
    currentDevBanner == devBanner.length - 1 ? changeDevBanner(0) : changeDevBanner(currentDevBanner + 1);
  } else if (dir == 0) {
    currentDevBanner == 0 ? changeDevBanner(devBanner.length - 1) : changeDevBanner(currentDevBanner - 1);
  }
}